<template>
  <div class="filter-wrapper mb-16">
    <template v-if="rule && rule.length">
      <el-form :model="value" class="cf">
        <m-form-item
          v-for="(r, ridx) in rule"
          :key="ridx"
          :label="r.label"
          :label-width="labelWidth"
          :label-position="labelPosition"
          :label-suffix="labelSuffix"
          :prop="r.field"
          :span="r?.col?.span || 24"
          :styles="r?.col?.styles"
        >
          <m-input v-if="r.type === 'input'" v-model="value[r.field]" />
          <m-select v-if="r.type === 'select'" v-model="value[r.field]" :options="r.options" :label-key="r.labelKey" :value-key="r.valueKey" />
          <m-date-picker v-if="dateTypeOptions.includes(r.type)" v-model="value[r.field]" :type="r.type" :format="r.format" />
          <template v-if="r.type == 'cascader'">
            <m-select
              class="cascader-item"
              :style="{ width: 'calc((100% - (' + (r.fieldGroup.length - 1) + ' * 6px)) / ' + r.fieldGroup.length + ')' }"
              v-for="(f, fidx) in r.fieldGroup"
              :key="fidx"
              v-model="value[f.field]"
              :options="f.options"
              :label-key="f.name"
              :value-key="r.valueKey"
              @change="handleCascaderChange($event, ridx, fidx)"
            />
          </template>
        </m-form-item>
        <template v-if="inline">
          <m-button class="mt--6" @click="handleQuery">查询</m-button>
          <m-button class="mt--6" @click="handleReset">重置</m-button>
        </template>
      </el-form>
    </template>
    <el-alert v-else title="请配置筛选项" type="info" center show-icon :closable="false"></el-alert>
    <slot name="action" v-if="!inline">
      <div class="text-center px-16">
        <m-button @click="handleQuery">查询</m-button>
        <m-button @click="handleReset">重置</m-button>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'MFilter',
  props: {
    size: {
      type: String,
      default: 'small',
    },
    inline: {
      type: Boolean,
      default: false,
    },
    labelPosition: {
      type: String,
      default: 'right',
    },
    labelWidth: {
      type: String,
      default: '100px',
    },
    labelSuffix: {
      type: String,
      default: '：',
    },
    value: {
      type: Object,
      default: () => {},
    },
    rule: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dateTypeOptions: ['date', 'daterange', 'datetimerange'],
    }
  },
  watch: {
    rule: {
      immediate: true,
      handler: function(val) {
        if (val.length) {
          val.forEach((el, ridx) => {
            if (el.type == 'cascader') {
              this.handleCascaderChange(el.pcode, ridx)
            }
          })
        }
      },
    },
  },
  methods: {
    handleQuery() {
      this.$emit('query')
    },
    handleReset() {
      this.$emit('reset')
    },
    handleCascaderChange(parentCode, ridx, fidx = -1) {
      this.rule[ridx].fieldGroup.forEach((el, idx) => {
        if (idx > fidx) {
          // this.$emit('cascader-reset', el.field)
          this.value[el.field] = ''
          this.rule[ridx].fieldGroup[idx].options = []
        }
      })

      const isLastLevel = fidx + 1 == this.rule[ridx].fieldGroup.length
      if (isLastLevel || !parentCode) return
      this.$http.get(this.$api.getEnumByCode, { parentCode }).then(res => {
        if (res.code == 200) {
          fidx = fidx == -1 ? 0 : fidx + 1
          this.rule[ridx].fieldGroup[fidx].options = res.data || []
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.filter-wrapper {
  padding: 20px 16px 2px;
  margin-bottom: 20px;
  background-color: rgba(0, 59, 166, 0.1);
  .cascader-item {
    display: inline-block;
    margin-right: 6px;
    &:last-of-type {
      margin-right: 0;
    }
  }
}
</style>
